<div class="questionnaire-questions form__wrapper">
  <div class="row column text-right my-4">
    <button type="button" class="button button__sm button__text-secondary collapse-all"><%= t("collapse", scope: "decidim.forms.admin.questionnaires.form") %></button>
    |
    <button type="button" class="button button__sm button__text-secondary expand-all"><%= t("expand", scope: "decidim.forms.admin.questionnaires.form") %></button>
  </div>

  <%= fields_for "questions[#{blank_question.to_param}]", blank_question do |question_form| %>
    <script type="text/template" class="decidim-question-template decidim-template" id="question-template">
      <%= render "decidim/elections/admin/questions/question",
                 form: question_form,
                 id: tabs_id_for_question(blank_question),
                 editable: true,
                 response_option_template_selector: "#response-option-template-dummy" %>
    </script>
    <%= render "decidim/elections/admin/questions/response_option_template", form: question_form, editable: true, template_id: "response-option-template-dummy" %>
  <% end %>

  <div class="questionnaire-questions-list flex flex-col py-6 gap-6 last:pb-0" data-draggable-table data-sort-url="#" data-draggable-handle=".card-divider" id="questionnaire-questions-list">
    <% @form.questions.each_with_index do |question, index| %>
      <%= fields_for "questions[]", question do |question_form| %>
        <%= render "decidim/elections/admin/questions/question",
                   form: question_form,
                   id: tabs_id_for_question(question),
                   editable: question.editable?,
                   response_option_template_selector: "#response-option-template-#{index}" %>
        <%= render "decidim/elections/admin/questions/response_option_template", form: question_form, editable: question.editable?, template_id: "response-option-template-#{index}" %>
      <% end %>
    <% end %>
  </div>
</div>

<% append_javascript_pack_tag "decidim_forms_admin" %>

<script>
  document.addEventListener("turbo:load", function () {
    window.Decidim.createEditableForm();
  });
</script>
